<template>
	<view class="page_all">
		<slot></slot>
		<view class='box' :class="type ? 'type':''" :style="top ?`top:${top}` : ''" @click="onNavPage()" v-if="objInfo">
			<view class="name">
				{{objInfo.fromNick}}
			</view>
			<view class="content">
				{{objInfo.type | typeName(objInfo)}}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		top:{
			type:String,
			default:''
		}
	},
	filters: {
		typeName(x, row) { //['text', 'audio', 'image', 'video'],
			return x == 'text' ? row.text : x == 'audio' ? '[语音]' : x == 'image' ? '[图片]' : x == 'video' ? '[视频]' : '[消息]'	
		}
	},
	data() {
		return {
			type:false,
			times:null,
			objInfo:null
		};
	},

	mounted() {
	},

	methods: {
		onNavPage(){
			if(this.objInfo.from == 0){
				uni.showToast({title:'暂未开通',icon:'none'})
			}else{
				setTimeout(() =>{
					if(this.$store.state.chat_list.length > 0){
						var row = this.$store.state.chat_list.find(c=>c.to == this.objInfo.from)
						if(row){
							if(row.toNick){
								this.$store.commit('set_chat_to',{id:row.to,name:row.toNick,avatar:row.toAvatar})
								uni.navigateTo({
									url:'/pagesChat/chatRoom'
								})
							}else{
								this.$IM.getUsers({
									accounts: [this.$store.state.chat_list[0].to],
									done: (err, obj) => {
										if (!err) {
											this.$store.commit('set_chat_to',{id:row.to,name:obj[0].nick,avatar:obj[0].avatar})
											uni.navigateTo({
												url:'/pagesChat/chatRoom'
											})
										}
									}
								});
							}
							
						}else{
							uni.navigateTo({url: '/pagesChat/systemMessage'})
						}
					}else{
						uni.navigateTo({url: '/pagesChat/systemMessage'})
					}
				}, 10)
				
			}
		},
		onType(params){
			clearTimeout(this.times)
			this.objInfo = params
			this.type = true
			this.times = setTimeout(()=>{
				this.type = false
			},2000)
		}
	}
};
</script>

<style scoped lang="scss">
	.page_all{
		width: 750rpx;
		overflow: hidden;
	}
	.box{
		width: 100%;
		padding: 18upx 30upx;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 0px 4px 30px 0px rgba(0,0,0,0.15); 
		position: fixed;
		z-index: 9999999;
		color: #3333;
		font-size: 30upx;
		left: 30rpx; 
		right: 30rpx;
		border-radius: 20rpx;
		top: 0rpx;
		padding: 30rpx 20rpx;
		width: 690rpx;
		box-sizing: border-box;
		opacity: 0;
		transform: translateZ(0) translateY(-120%);
		transition: all 0.3s ease-in-out;
		.name{
			font-size: 26rpx;
			color:#333;
			margin-bottom: 20rpx;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			word-break: break-all;
		}
		.content{
			font-size: 24rpx;
			color:#333;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			word-break: break-all;
		}
	}
	.type{
		transform: translateZ(0) translateY(0);
		opacity: 1;
	}
</style>
